﻿@model vnMcdonald.Models.Product

@{
    ViewBag.Title = "ProductEdit";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<h2>SỬA SẢN PHẨM</h2>
<section id="inner-box">
    @using (Html.BeginForm("ProductEdit", "Admin", FormMethod.Post, new { @encType = "multipart/form-data" }))
    { 
        <ul class="button">
            <li><a id="add" href="/admin/ProductCreate" title="Thêm mới"><img src="~/Content/admin/images/add-icon.png" alt="Thêm" />Thêm mới</a></li>
            <li><input type="submit" id="btnluu" value="Lưu lại" /></li>
            <li><a id="back" href="@Url.Action("products", "Admin")" title="Trở về"><img src="~/Content/admin/images/go_back.png" alt="Trở về" />Về danh sách</a></li>
            <li><a id="refresh" href="" title="Tải lại"><img src="~/Content/admin/images/refresh-icon.png" alt="Tải lại" />Tải lại</a></li>
        </ul>
        <div id="inner">
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.ProductId)
            @Html.HiddenFor(model => model.IsActive)
            @Html.ValidationMessage("info_err")
            <div class="editor-field">
                <label for="category">Danh mục</label>
                @Html.DropDownList("loadcategory")
            </div>
            <div class="editor-field">
                @Html.LabelFor(model => model.Name)
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.LabelFor(model => model.Price)
                @Html.EditorFor(model => model.Price)
                @Html.ValidationMessageFor(model => model.Price)
            </div>
            <div class="editor-field noborder">
                @Html.HiddenFor(model => model.CreateDate)
                @Html.ValidationMessageFor(model => model.CreateDate)
            </div>
            <div class="editor-field">
            <label class="lbimg">Hình ảnh </label>
            <div id="img-field">
                <ul id="sortable">
                 @{
        var image = Model.Images.Where(i => i.ProductId == Model.ProductId).OrderBy(i => i.Order);
        foreach (var item in image)
        {
                        <li rel="@item.ImageId">
                            <div id="@item.ImageId" class="imgproduct">
                                <img src="@item.Src" alt="" height=120 />
                                <span class="delimg"></span>
                                <div id="image-@item.ImageId">
                                    @{
            if (item.IsActive == 1)
            {
                                            @Ajax.ActionLink("Mở", "Update_status_image", new { id = item.ImageId }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "image-" + string.Format("{0}", item.ImageId) }, new { @class = "enable" })
                //<span class="sttimg sttimg_enable"></span>
            }
            else
            {
                                            @Ajax.ActionLink("Đóng", "Update_status_image", new { id = item.ImageId }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "image-" + string.Format("{0}", item.ImageId) }, new { @class = "disable" })
                //<span class="sttimg sttimg_disable"></span>
            } 
                                    }
                                </div>
                            </div>
                        </li>
        }
                }
                </ul>
                <div class="clear"></div>
                <input type="file" id="imageproduct" name="imageproduct" multiple="multiple" />
                @Html.ValidationMessage("error")<br />
                Có thể chọn nhiều hình ảnh<br />
                Dung lượng tối đa: <strong>2M</strong> <br />
                Chỉ hổ trợ ảnh có đuổi mở rộng <strong>jpg,png,gif</strong>.
                
            </div>
        </div>
        <div class="clear"></div>
            <div class="editor-field">
                @Html.LabelFor(model => model.Description)
                @Html.TextAreaFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>
    }
</section>

@*<script type="text/javascript">
    CKEDITOR.replace('Description', { height: 300 });
</script>*@
 
<script src="~/Content/admin/js/script.js"></script>
<script>
    $(document).ready(function () {
        var id_image;
        var index_start;
        var id_product = $("#ProductId").val();
        $('#sortable').sortable({
            //axis: 'y',
            revert: true,
            start: function(event,ui){
                id_image = $(this).find('li').attr('rel');
                index_start = ui.item.index();
                //alert(id_image + index_start);
            },
            stop: function (event, ui) {
                //var data = $(this).sortable('serialize');
                var index_end = ui.item.index();
                
                //var
                //var data = {};
                //$(this).find('li').each(function (index) {
                //    data[index] = { "id": $(this).attr('rel'), "pos": index + 1 };
                //    //data[index]["id"] = $(this).attr('rel');
                //    //data[index]["pos"] = index + 1;
                //});
                $.ajax({
                    type: 'post',
                    url: '../ImageSort',
                    //dataType: "json",
                    //traditional: true,
                    data: {id_product:id_product, id_image: id_image, index_start: index_start, index_end: index_end }
                });
            }
        });
    });
    //$(function () {
    //    $("#sortable").sortable({
    //        revert: true
    //    });
    //    $("tr").disableSelection();
    //});
	</script>
